<template>
  <div class="w-100% h-100% flex">
    <div class="w-80% h-100%">
      <m-echarts :option="chartOption" ref="echartRef"></m-echarts>
    </div>
    <div class="w-20% h-100% flex-col" style="justify-content: space-around;display: flex">
      <div class="b-solid p-1">
        <div class="text-center">过程数据</div>
        <div class="flex">
          <span class="block w-7vw">样本均值 </span>
          <span>{{props?.cpkData?.ppk?.avg}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">样本数 </span>
          <span>{{props?.cpkData?.rawData?.length}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">标准差(组内)</span>
          <span>{{props?.cpkData?.cpk?.sigma}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">标准差(整体)</span>
          <span>{{props?.cpkData?.ppk?.sigma}}</span>
        </div>
      </div>
      <div class="b-solid p-1">
        <div class="text-center">整体能力</div>
        <div class="flex">
          <span class="block w-7vw">PP </span>
          <span>{{props?.cpkData?.ppk?.cp}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">PPL</span>
          <span >{{props?.cpkData?.ppk?.cpl}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">PPU</span>
          <span>{{props?.cpkData?.ppk?.cpu}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">PPK</span>
          <span >{{props?.cpkData?.ppk?.cpk}}</span>
        </div>
      </div>
      <div class="b-solid p-1">
        <div class="text-center">潜在（组内）能力</div>
        <div class="flex">
          <span class="block w-7vw">CP </span>
          <span>{{props?.cpkData?.cpk?.cp}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">CPL</span>
          <span >{{props?.cpkData?.cpk?.cpl}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">CPU</span>
          <span>{{props?.cpkData?.cpk?.cpu}}</span>
        </div>
        <div class="flex">
          <span class="block w-7vw">CPK</span>
          <span >{{props?.cpkData?.cpk?.cpk}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import MEcharts from "@/components/MEcharts/MEcharts.vue";
import {ref , watch} from 'vue';

const chartOption = ref<any>({});


interface Data{
  cpkData?:CpkData;
}

interface CpkData {
  rawData?:number[];
  cpk?:CpkItem;
  ppk?:CpkItem;
  groupMap?:any;
}

interface CpkItem {
  cp:number;
  cpu:number;
  cpl:number;
  cpk:number;
  avg:number;
  sigma:number;
  lsl:number;
  usl:number;
}

const props = withDefaults(defineProps<Data>(),{});

const echartRef = ref();

//监听图表数据时候变化，重新渲染图表
watch(() => props, () => {
  getCpkOption(props.cpkData?.groupMap);
}, { deep: true })


const getCpkOption = (data:any)=> {
  const xdata = [];
  const ydata = [];
  for (let key in data){
    xdata.push(key);
    ydata.push(data[key]);
  }
  echartRef.value.resizeHandler();

  const yData1 = []
  const avg = props.cpkData.cpk.avg;
  const sigma = props.cpkData.cpk.sigma;
  const min = avg - 3 * sigma;
  const max = avg + 3 * sigma;
  const itemLength = (max - min) / 200;
  for (let i = min; i < max ; i += itemLength) {
    //@ts-ignore
    let y = Math.exp(-0.5 * Math.pow((i - avg) / sigma, 2)) / (sigma * Math.sqrt(2 * Math.PI))
    yData1.push([i , y]);
  }

  chartOption.value = {
    legend: {
      'data': ['过程能力（估算）', '过程能力（实测）']
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: xdata
      },
      {
        type: 'value',
        show:false,
        axisTick: {
          show: false //不显示刻度
        },
        boundaryGap: false,
        //@ts-ignore
        min: Math.min.apply(null, xdata),
        //@ts-ignore
        max: Math.max.apply(null, xdata)
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '频数',
        position: 'left',
        axisLine: {
          show: true //是否显示坐标轴轴线
        },
      },
      {
        type: 'value',
        name: '概率',
        position: 'right',
        show:false,
        axisLine: {
          show: true //是否显示坐标轴轴线
        },
      }
    ],
    series: [
      {
        name: '数据个数', // y 轴名称
        type: 'bar', // y 轴类型
        xAxisIndex: 0,  //使用主坐标轴x轴
        barCategoryGap: '0%',       //---柱形间距
        data: ydata, // y 轴数据 -- 源数据
      },
      {
        name: '',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex:1,
        symbol: 'none',
        smooth: true,
        data: yData1,
      },
      {
        name: '标线',
        type: 'line',
        xAxisIndex: 1,
        symbol: 'none',
        smooth: true,

        //实测数据警示线
        markLine: {
          symbol: ['none'], // 箭头方向
          itemStyle: { color: '#FF0000' },
          animation: false,
          data: [
            {
              name: 'LSL',
              xAxis: props?.cpkData?.cpk?.lsl,
              lineStyle: { color: '#cc0000', width: 2 },
              label: { color: '#cc0000', position: 'end' }
            },
            {
              name: 'USL',
              xAxis: props?.cpkData?.cpk?.usl,
              lineStyle: { color: '#cc0000', width: 2 },
              label: { color: '#cc0000', position: 'end' }
            },
            {
              name: '均值',
              xAxis: props?.cpkData?.cpk?.avg,
              lineStyle: { color: '#00CC00', width: 2 },
              label: { color: '#00CC00', position: 'end' }
            },
          ]
        }
      }
    ]
  }
}



</script>
<style scoped>
</style>